<template>
  <el-card class="procurement-card">
    <el-row>
      <el-col :span="24">
        <h2>采购大厅</h2>
      </el-col>
    </el-row>

    <el-row :gutter="35">
      <el-col :span="24">
        <div class="header">
          <div class="title">优质商铺</div>
          <div class="more">
            <el-link :underline="false" style="font-size: 12px;">
              更多<el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
        </div>
        <div class="content">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">
            <div class="loading-skeleton">
              <div class="skeleton-card" v-for="i in 6" :key="i">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                  <div class="skeleton-line skeleton-title"></div>
                  <div class="skeleton-line skeleton-text"></div>
                  <div class="skeleton-line skeleton-text short"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 错误状态 -->
          <div v-else-if="errorMsg" class="error-container">
            <div class="error-content">
              <el-icon class="error-icon"><WarningFilled /></el-icon>
              <h3 class="error-title">加载失败</h3>
              <p class="error-text">{{ errorMsg }}</p>
              <el-button type="primary" @click="fetchAllShops" class="retry-btn">
                <el-icon><Refresh /></el-icon>
                重新加载
              </el-button>
            </div>
          </div>

          <!-- 商铺列表（接口调用成功） -->
          <div v-else class="shop-list">
            <!-- 空状态 -->
            <div v-if="shopList.length === 0" class="empty-container">
              <div class="empty-content">
                <el-icon class="empty-icon"><Shop /></el-icon>
                <h3 class="empty-title">暂无商铺</h3>
                <p class="empty-text">优质供应商正在入驻中，敬请期待</p>
              </div>
            </div>

            <!-- 有商铺数据：循环展示商铺卡片 -->
            <div
                v-else
                v-for="shop in shopList"
                :key="shop.shopId"
                class="shop-card"
                @click="goToShop(shop.shopId)"
            >
              <!-- 商铺信息 -->
              <div class="shop-info">
                <div class="shop-header">
                  <div class="shop-avatar">
                    <img
                        :src="shop.shopAvatar || defaultAvatar"
                        alt="商铺头像"
                        class="avatar-img"
                    >
                    <div class="verified-badge">
                      <el-icon><Select /></el-icon>
                    </div>
                  </div>
                  <div class="shop-status">
                    <span class="status-dot online"></span>
                    <span class="status-text">营业中</span>
                  </div>
                </div>
                <h3 class="shop-name">{{ shop.shopName }}</h3>

                <div class="shop-location">
                  <el-icon class="location-icon"><LocationFilled /></el-icon>
                  <span>{{ getFullAddress(shop) }}</span>
                </div>
                <div class="shop-meta">
                  <div class="meta-item">
                    <span class="meta-label">商家ID</span>
                    <span class="meta-value">{{ shop.uid }}</span>
                  </div>
                </div>
              </div>

              <!-- 底部标签和按钮 -->
              <div class="shop-footer">
                <div class="shop-tags">
                  <span class="tag">优质商家</span>
                  <span class="tag">快速发货</span>
                </div>
                <div class="enter-btn">
                  <span>进入店铺</span>
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
// 1. 引入依赖
import {ref, onMounted} from 'vue';
import {getAllShops} from '@/apis/shopApi.js'; // 引入API方法
import {useRouter} from 'vue-router'; // 路由跳转
import {ElEmpty, ElIcon, ElButton} from 'element-plus'; // 引入Element组件
import {LocationFilled, WarningFilled, Shop, Refresh, Select, ArrowRight} from '@element-plus/icons-vue'; // 引入图标
import 'element-plus/dist/index.css';

// 2. 初始化路由实例
const router = useRouter();

// 3. 定义响应式数据
const loading = ref(true); // 加载状态
const errorMsg = ref(''); // 错误信息
const shopList = ref([]); // 商铺列表数据
const defaultAvatar = ref('@/assets/img/logo.png'); // 默认头像

// 4. 页面挂载时：调用接口获取商铺数据
onMounted(() => {
  fetchAllShops();
});

// 5. 核心方法：获取所有商铺数据
const fetchAllShops = async () => {
  try {
    loading.value = true; // 开始加载
    const res = await getAllShops(); // 调用API

    // 处理响应：根据CustomResponse格式判断
    if (res.code === 200) {
      shopList.value = res.data; // 成功：赋值商铺列表
      errorMsg.value = ''; // 清空错误信息
    } else {
      errorMsg.value = res.message || '获取商铺失败'; // 失败：显示错误信息
      shopList.value = []; // 清空列表
    }
  } catch (err) {
    // 捕获网络异常
    errorMsg.value = '网络异常，请检查网络连接';
    shopList.value = [];
    console.error('获取商铺异常：', err);
  } finally {
    loading.value = false; // 结束加载
  }
};

// 6. 辅助方法：格式化完整地址
const getFullAddress = (shop) => {
  return [
    shop.province,
    shop.city,
    shop.area,
    shop.town,
    shop.address
  ].filter(Boolean).join(' ');
};

// 7. 进入店铺：复用商品详情页的店铺跳转逻辑
const goToShop = (shopId) => {
  // 与商品详情页保持一致的路由规则：/shop/店铺ID
  router.push(`/shop/${shopId}`);
};
</script>

<style scoped lang="less">
.procurement-card{
  width: auto;
  height: 650px;
  background-color: white;
}

.header{
  margin-bottom: 15px;
}

.title{
  font-size: 16px;
  color: #444;
  letter-spacing: 0;
  padding-left: 8px;
  border-left: 4px solid #39bf3e;
  float: left;
}

.more{
  float:right;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  display: inline-grid;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

// 加载状态样式
.loading-container {
  .loading-skeleton {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 16px;
    
    .skeleton-card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      
      .skeleton-avatar {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        margin-bottom: 12px;
      }
      
      .skeleton-content {
        .skeleton-line {
          height: 12px;
          border-radius: 3px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200% 100%;
          animation: skeleton-loading 1.5s infinite;
          margin-bottom: 8px;
          
          &.skeleton-title {
            height: 14px;
            width: 60%;
          }
          
          &.skeleton-text {
            width: 80%;
            
            &.short {
              width: 40%;
            }
          }
        }
      }
    }
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// 错误状态样式
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  
  .error-content {
    text-align: center;
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    
    .error-icon {
      font-size: 64px;
      color: #f56c6c;
      margin-bottom: 24px;
    }
    
    .error-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 12px 0;
    }
    
    .error-text {
      color: #7f8c8d;
      margin-bottom: 24px;
      font-size: 16px;
    }
    
    .retry-btn {
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 8px;
      
      .el-icon {
        margin-right: 8px;
      }
    }
  }
}

// 空状态样式
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  
  .empty-content {
    text-align: center;
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    
    .empty-icon {
      font-size: 64px;
      color: #409eff;
      margin-bottom: 24px;
    }
    
    .empty-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 12px 0;
    }
    
    .empty-text {
      color: #7f8c8d;
      font-size: 16px;
      margin: 0;
    }
  }
}

// 商铺列表样式
.shop-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 16px;
}

// 商铺卡片样式
.shop-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }
  
  .shop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    
    .shop-avatar {
      position: relative;
      
      .avatar-img {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        object-fit: cover;
        border: 2px solid #f0f0f0;
      }
      
      .verified-badge {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 16px;
        height: 16px;
        background: #52c41a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid white;
        
        .el-icon {
          color: white;
          font-size: 10px;
        }
      }
    }
    
    .shop-status {
      display: flex;
      align-items: center;
      gap: 4px;
      
      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        
        &.online {
          background: #52c41a;
          animation: pulse 2s infinite;
        }
      }
      
      .status-text {
        font-size: 10px;
        color: #52c41a;
        font-weight: 500;
      }
    }
  }
  
  .shop-info {
    flex: 1;
    margin-bottom: 12px;
    
    .shop-name {
      font-size: 14px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 8px 0;
      line-height: 1.3;
      
      &:hover {
        color: #409eff;
      }
    }
    
    .shop-location {
      display: flex;
      align-items: center;
      color: #7f8c8d;
      font-size: 11px;
      margin-bottom: 8px;
      
      .location-icon {
        color: #409eff;
        margin-right: 4px;
        font-size: 12px;
      }
    }
    
    .shop-meta {
      .meta-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-top: 1px solid #f0f0f0;
        
        .meta-label {
          font-size: 10px;
          color: #95a5a6;
        }
        
        .meta-value {
          font-size: 10px;
          color: #2c3e50;
          font-weight: 500;
        }
      }
    }
  }
  
  .shop-footer {
    .shop-tags {
      display: flex;
      gap: 4px;
      margin-bottom: 8px;
      
      .tag {
        padding: 2px 6px;
        background: #e6f7ff;
        color: #1890ff;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 500;
      }
    }
    
    .enter-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px;
      background: #409eff;
      color: white;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:hover {
        background: #66b1ff;
      }
      
      .el-icon {
        font-size: 12px;
      }
    }
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
  }
}
</style>